<template>
	<!-- 商品详情轮播图 -->
	<view class='product-bg'>
		<swiper :indicator-dots="indicatorDots"  :autoplay="autoplay" :circular="circular"
		 :interval="interval" :duration="duration" @change="change">
			<block v-for="(item,index) in imgUrls" :key='index'>
				<swiper-item>
					<image :src="item" class="slide-image" />
				</swiper-item>
			</block>
		</swiper>
		<view class="pages">{{currents}} / {{imgUrls.length}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgUrls: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				currents: "1",
			};
		},
		mounted() {

		
		},
		methods: {
			change: function(e) {
				this.$set(this, 'currents', e.detail.current + 1);
			}
		}
	}
</script>

<style scoped lang="scss"> 


  .item-box {
    width:100%;
    height:100% 
  }
	.product-bg {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.product-bg swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.product-bg .slide-image {
		width: 100%;
		height: 100%;
	}

	.product-bg .pages {
		position: absolute;
		background-color: rgba(0, 0, 0, .24);
		height: 56rpx;
		padding: 10rpx 24rpx;
		border-radius: 28rpx;
		right: 30rpx;
		bottom: 40rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	#myVideo {
		width: 100%;
		height: 100%
	}

	.product-bg .item {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.product-bg .item .poster {
		position: absolute;
		top: 0;
		left: 0;
		height: 750rpx;
		width: 100%;
		z-index: 9;
	}

	.product-bg .item .poster .image {
		width: 100%;
		height: 100%;
	}

	.product-bg .item .stop {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 136rpx;
		height: 136rpx;
		margin-top: -68rpx;
		margin-left: -68rpx;
		z-index: 9;
	}

	.product-bg .item .stop .image {
		width: 100%;
		height: 100%;
	}
	
	/* ---- */
	.swiper-content {
		position: absolute;
		left: 20rpx;
		bottom: 70rpx;
		width: 100%;
		height: 120rpx;
		.swiper {
			height: 110rpx;
			padding-left: 45rpx;
			opacity: 1;
			transition: opacity .8s ease;
			/* 用障眼法实现轮播图上一个item半透明 */
			.current { // 当前显示的 item
				opacity: .5;
				transition: opacity .8s ease;
			}
			.previous { // 上一个 item
				opacity: .2;
			}
			.flex_c {
				display: flex;
				align-items: center;
			}
			.tip {
				width: max-content;
				height: 50rpx;
				border-radius: 50rpx;
				padding: 5rpx 16rpx 5rpx 5rpx;
				background-color: rgba(0, 0, 0, 0.6);
				.avatar {
					width: 40rpx;
					height: 40rpx;
					background-color: #fff;
					border-radius: 100%;
					margin-right: 12rpx;
				}
				.tips-text {
					color: #f6fcff;
					font-size: 16rpx;
				}
			}
		}
	}
	/* 以上测试代码 */
</style>
